<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'shake_animation.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
     
  /*提示信息*/
    .tooltip{
        border:0px solid red;
        display:inline-block;
        position:absolute;
        width:100%;
        padding:0 3px;
        background:#A8EEE4;
        border-radius:5px;
        margin:0 auto;
        color:#cc0000;
        font-weight:bold;
        _filter:alpha(opacity=0);   
        opacity: 0;  
    }
     /*向下箭头*/
    .tooltip span{
        position:absolute;
        width:0;
        height:0;
        border-left: 1px;
        border-style: solid;
        left:46%;
        top:100%;
    }
	</style> 
  </head>
<script type="text/javascript" src="<%=basePath%>/jquery-1.2.6.js"></script>
<script>

//跳动
;$.fn.jump = function (options) {
	    var defaults = {"init_top":0};
        var options =  $.extend(defaults, options);  
        options.init_top = $(this).offset().top;
        this.each(function () {
                 $(this).animate({"top":(options.init_top - 6)+"px"},150).animate({"top":options.init_top + "px"},132)
                .animate({"top":(options.init_top - 5)+"px"},130).animate({"top":options.init_top + "px"},120)
                .animate({"top":(options.init_top - 4)+"px"},110).animate({"top":options.init_top + "px"},100)
                .animate({"top":(options.init_top - 3)+"px"},90).animate({"top":options.init_top + "px"},80)
                .animate({"top":(options.init_top - 2)+"px"},75).animate({"top":options.init_top + "px"},70)
                .animate({"top":(options.init_top - 1)+"px"},62).animate({"top":options.init_top + "px"},20);
        });
        return this;
};


	$(document).ready(function () {
		$(".bt").hover(function(){
			var _thisObj = $(this);
			var tipinfo = "提飞机打开撒娇了";
			var titleinfo = "title信息";
			
			var tooltip_div = $("<span></span>").addClass("tooltip");
            $("<em></em>").text(tipinfo).attr("title",titleinfo).appendTo(tooltip_div);
            $("<span></span>").appendTo(tooltip_div);
            _thisObj.before(tooltip_div);
            var topLoc = _thisObj.offset().top - _thisObj.height() - 7;
            var leftLoc = _thisObj.offset().left;
            var addleft = (tooltip_div.width() - _thisObj.width()) / 2;
            //居中指向
            leftLoc = leftLoc - addleft;
            tooltip_div.css({
                "left":leftLoc
                ,"top":topLoc
            }).fadeIn().animate({
                "opacity": 0.6,
                "_filter":"alpha(opacity=0.6)"   
            }).jump();
		},function(){
		
		});
	});
</script>
  
  <body>
<input type ="button" value="test" class ="bt"/>
  
    http://127.0.0.1:81/MyDemos/tip_light2.jsp
    <input type="text" value="v1" class="bt">
    <input type="text" value="v2" class="bt">
  </body>
</html>
